<template>
  <div>
    <div class="house-agent" v-for="item in agentList" :key="item.id" @click="toAgent(item)">
<div class="left">
  <HouseImg :image="item.image"></HouseImg>
</div>
<div class="right">
  <p class="name">{{item.name}}</p>
  <div class="desc">{{item.desc}}</div>
</div>
    </div>
  </div>
</template>

<script>
import { agentList } from '@/api/agent'
export default {
  name: 'HouseIndex',

  data () {
    return {
      agentList: []
    }
  },
  created () {
    this.getAgentList()
  },
  mounted () {

  },

  methods: {
    async getAgentList () {
      try {
        const res = await agentList({
          _limit: 10
        })
        console.log(res)
        this.agentList = res
      } catch (error) {
        console.log(error)
      }
    },
    toAgent (obj) {
      this.$router.push({ name: 'agent', query: { id: obj.id, name: obj.name } })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .house-agent{
  display: flex;
  padding: 10px 5px;
  .van-image{
        width: 145px;
    height: 163px;
  }
  .right{
        display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 25px;
    .desc{
      height: 83px;
        overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;//2表示行数，看自己需求设置超出多少行后出现...
  -webkit-box-orient: vertical;
    }
    .name{
     margin-top: -34px;
    }
  }
}
</style>
